<template>
  <view class="container">
    <!-- <view class="bg-sear">
      <view class="scrolltop">
        <view class="section" @tap="toSearchPage">
          <image src="@/static/images/icon/search.png" class="search-img" />
          <text class="placeholder">
            搜索
          </text>
        </view>
      </view>
    </view> -->

    <view class="content">
      <!-- swiper -->
      <swiper :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval" :duration="duration"
        :indicator-active-color="indicatorActiveColor" :circular="true" class="pic-swiper" indicator-dots>
        <block v-for="(item, index) in indexImgs" :key="index">
          <swiper-item class="banner-item">
            <view class="img-box">
              <image :src="item.imgUrl" :data-prodid="item.relation" class="banner" @tap="toProdPage" />
            </view>
          </swiper-item>
        </block>
      </swiper>
      <!-- end swiper -->

      <!-- 用户会员信息 -->
      <view class="user-content">
        <!-- 未登录状态 -->
        <view class="user-text">
          <text v-if="!isAuthInfo">Hey，来跟甜蜜打个招呼</text>
          <text v-else>您已登录，开始您的甜蜜之旅吧</text>
        </view>
        <!-- 登录注册 -->
        <view v-if="!isAuthInfo" class="login-btn" @click="toLogin">
          登录/注册
        </view>
      </view>

      <view class="cat-item">
        <view class="cat-item-top">
          <view class="item" data-sts="1" @tap="toClassifyPage">
            <image src="@/static/images/icon/menu2.png" />
            <text class="item-top">线上约</text>
            <text class="item-bottom">线上预约糖果</text>
          </view>
          <view class="item" data-sts="1" @tap="toClassifyPage">
            <image src="@/static/images/icon/menu3.png" />
            <text class="item-top">幸运送</text>
            <text class="item-bottom">及时送达到家</text>
          </view>
          <view class="item" data-sts="3" @tap="toClassifyPage">
            <image src="@/static/images/icon/menu4.png" />
            <text class="item-top">电商购</text>
            <text class="item-bottom">囤糖果买周边</text>
          </view>
          <!-- <view class="item" @tap="toCouponCenter">
          <image src="@/static/images/icon/menu1.png" />
          <text>领优惠券</text>
        </view> -->
        </view>
      </view>

      <!-- 消息播放 -->
      <view v-if="newsList && newsList.length > 0" class="message-play">
        <!-- <image src="@/static/images/icon/horn.png" class="hornpng" />
        <swiper :vertical="true" :autoplay="true" :circular="true" duration="1000" class="swiper-cont">
          <block v-for="(item, index) in news" :key="index">
            <swiper-item class="items">
              {{ item.title }}
            </swiper-item>
          </block>
        </swiper>
        <text class="arrow" /> -->
        <up-notice-bar direction="column" :text="newsList" @click="onNewsPage"></up-notice-bar>
      </view>
    </view>

    <view v-if="updata" class="updata">
      <block v-for="(item, index) in taglist" :key="index">
        <!-- 每日上新 -->
        <view v-if="item.style === '2' && item.prods && item.prods.length" class="up-to-date">
          <view class="title">
            <text>{{ item.title }}</text>
            <view class="more-prod-cont" data-sts="0" :data-id="item.id" :data-title="item.title" @tap="toClassifyPage">
              <text class="more">
                查看更多
              </text>
            </view>
          </view>
          <view class="item-cont">
            <block v-for="(prod, index2) in item.prods" :key="index2">
              <view class="prod-item" :data-prodid="prod.prodId" @tap="toProdPage">
                <view class="item-box">
                  <view class="imagecont">
                    <img-show :src="prod.pic" :class-list="['prodimg']" />
                  </view>
                  <view class="prod-text">
                    {{ prod.prodName }}
                  </view>
                  <view class="price">
                    <text class="symbol">
                      ￥
                    </text>
                    <text class="big-num">
                      {{ prod.price }}
                    </text>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>

        <!-- 商城热卖 -->
        <view v-if="item.style === '1' && item.prods && item.prods.length" class="hot-sale">
          <view class="title">
            <text>{{ item.title }}</text>
            <view class="more-prod-cont" data-sts="0" :data-id="item.id" :data-title="item.title" @tap="toClassifyPage">
              <text class="more">
                更多
              </text>
              <text class="arrow" />
            </view>
          </view>
          <view class="hotsale-item-cont">
            <block v-for="(prod, index2) in item.prods" :key="index2">
              <view class="prod-items" :data-prodid="prod.prodId" @tap="toProdPage">
                <view class="hot-imagecont">
                  <img-show :src="prod.pic" :class-list="['hotsaleimg']" />
                </view>
                <view class="hot-text">
                  <view class="hotprod-text">
                    {{ prod.prodName }}
                  </view>
                  <view class="prod-info">
                    {{ prod.brief }}
                  </view>
                  <view class="prod-text-info">
                    <view class="price">
                      <text class="symbol">
                        ￥
                      </text>
                      <text class="big-num">
                        {{ prod.price }}
                      </text>
                    </view>
                    <image src="@/static/images/tabbar/basket-sel.png" class="basket-img" />
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>

        <!-- 更多宝贝 -->
        <view v-if="item.style === '0' && item.prods && item.prods.length" class="more-prod">
          <view class="title">
            {{ item.title }}
          </view>
          <view class="prod-show">
            <block v-for="(prod, index2) in item.prods" :key="index2">
              <view class="show-item" :data-prodid="prod.prodId" @tap="toProdPage">
                <view class="more-prod-pic">
                  <img-show :src="prod.pic" :class-list="['more-pic']" />
                </view>
                <view class="prod-text-right">
                  <view class="prod-text more">
                    {{ prod.prodName }}
                  </view>
                  <view class="prod-info">
                    {{ prod.brief }}
                  </view>
                  <view class="b-cart">
                    <view class="price">
                      <text class="symbol">
                        ￥
                      </text>
                      <text class="big-num">
                        {{ prod.price }}
                      </text>
                    </view>
                    <image src="@/static/images/tabbar/basket-sel.png" class="basket-img" @tap.stop="addToCart(prod)" />
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>
      </block>
    </view>
    <!-- 用户隐私保护提示（仅微信小程序） -->
    <privacy-popup :hideTabBar="true" />
  </view>
</template>

<script setup>
import { getShareUrlParams } from '@/utils/common.js'
import PrivacyPopup from '@/components/privacy-popup/index.vue'
import { computed } from 'vue';

const wxs = number()
const indicatorColor = ref('#999')
const indicatorActiveColor = ref('#ffffff')
const autoplay = ref(true)
const interval = ref(5000)
const duration = ref(1000)
const indexImgs = ref([])
const seq = ref(0)
const news = ref([])
const newsList = computed(() => {
  return news.value.map(i => i.title)
})
const taglist = ref([])
const updata = ref(true)
const isAuthInfo = ref(false)

onLoad(() => {
  getAllData()
})
onShow(() => {
  // 从缓存拿取是否登录过信息
  const loginResult = uni.getStorageSync('loginResult')
  isAuthInfo.value = !!loginResult
  // #ifdef MP-WEIXIN
  uni.getSetting({
    success(res) {
      if (!res.authSetting['scope.userInfo']) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
    }
  })
  // #endif
  http.getCartCount() // 重新计算购物车总数量
})

onPullDownRefresh(() => {
  // 模拟加载
  setTimeout(() => {
    getAllData()
    uni.stopPullDownRefresh() // 停止下拉刷新
  }, 100)
})

/**
 * 分享内容
 */
onShareAppMessage(() => {
  return {
    title: import.meta.env.VITE_APP_STORE_NAME,
    path: "/pages/index/index?" + getShareUrlParams({})
  }
})

const toLogin = () => {
  uni.navigateTo({
    url: '/pages/accountLogin/accountLogin'
  })
}

const getAllData = () => {
  http.getCartCount()// 重新计算购物车总数量
  getIndexImgs()
  getNoticeList()
  getTag()
}

const toProdPage = (e) => {
  const prodid = e.currentTarget.dataset.prodid

  if (prodid) {
    uni.navigateTo({
      url: '/pages/prod/prod?prodid=' + prodid
    })
  }
}
/**
 * 加入购物车
 * @param item
 */
const addToCart = (item) => {
  uni.showLoading({
    mask: true
  })
  http.request({
    url: '/prod/prodInfo',
    method: 'GET',
    data: {
      prodId: item.prodId
    }
  })
    .then(({ data }) => {
      http.request({
        url: '/p/shopCart/changeItem',
        method: 'POST',
        data: {
          basketId: 0,
          count: 1,
          prodId: data.prodId,
          shopId: data.shopId,
          skuId: data.skuList[0].skuId
        }
      })
        .then(() => {
          uni.hideLoading()
          http.getCartCount() // 重新计算购物车总数量
          uni.showToast({
            title: '加入购物车成功',
            icon: 'none'
          })
        })
    })
}

const toCouponCenter = () => {
  uni.showToast({
    icon: 'none',
    title: '该功能未开源'
  })
}

/**
 * 跳转搜索页
 */
const toSearchPage = () => {
  uni.navigateTo({
    url: '/pages/search-page/search-page'
  })
}

/**
 * 跳转商品活动页面
 * @param e
 */
const toClassifyPage = (e) => {
  let url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts
  const id = e.currentTarget.dataset.id
  const title = e.currentTarget.dataset.title

  if (id) {
    url += '&tagid=' + id + '&title=' + title
  }

  uni.navigateTo({
    url
  })
}
/**
 * 跳转公告列表页面
 */
const onNewsPage = () => {
  uni.navigateTo({
    url: '/pages/recent-news/recent-news'
  })
}

/**
 * 加载轮播图
 */
const getIndexImgs = () => {
  http.request({
    url: '/indexImgs',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      indexImgs.value = data
      seq.value = data
    })
}

const getNoticeList = () => {
  // 加载公告
  http.request({
    url: '/shop/notice/topNoticeList',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      news.value = data
    })
}

/**
 * 加载商品标题分组列表
 */
const getTag = () => {
  http.request({
    url: '/prod/tag/prodTagList',
    method: 'GET',
    data: {}
  })
    .then(({ data }) => {
      taglist.value = data
      for (let i = 0; i < data.length; i++) {
        updata.value = false
        updata.value = true
        getTagProd(data[i].id, i)
      }
    })
}

const getTagProd = (id, index) => {
  http.request({
    url: '/prod/prodListByTagId',
    method: 'GET',
    data: {
      tagId: id,
      size: 6
    }
  })
    .then(({ data }) => {
      updata.value = false
      updata.value = true
      const taglistParam = taglist.value
      taglistParam[index].prods = data.records
      taglist.value = taglistParam
    })
}
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
